<template>
	<view>
		<view class="top-sel">
			<v-tabs activeColor="#0F0F0F" lineColor="#0F0F0F" lineHeight="5rpx" lineScale="0.3" :scroll="false"
				v-model="current" :tabs="tabs" @change="changeTab"></v-tabs>
			<uni-search-bar v-model="dianshu" @input="input" :placeholder="current==0?'输入充值点数':'扣费项目'">
			</uni-search-bar>
			<view class="tabs flex align between" v-if="current==0">
				<view class="flex align tab-item" @click="toShow" style="border-right: solid 1rpx #D9D9D9;">
					{{type==0?'充值':type==1?'项目退款':'全部类型'}}
					<image src="../../static/icon3.png"></image>
					<view class="tab-option" v-if="show">
						<view @click="toType('3')">全部类型</view>
						<view @click="toType('0')">充值</view>
						<view @click="toType('1')">项目退款</view>
					</view>
				</view>
				<!-- <view class="flex align tab-item" @click="showCalendar = true">
					<text v-if="addTimeText==''">充值时间</text>
					<text style="font-size: 24rpx;" v-else>{{addTimeText}}</text>
					<image src="../../static/icon3.png"></image>
				</view> -->
			</view>
		</view>
		<view class="lists" v-if="current==0">
			<view class="item flex between" v-for="(item,index) in list" :key="index">
				<view class="item-left flex align">
					<image src="../../static/icon2.png"></image>
					<view>
						<view class="tit">{{item.remark}}</view>
						<view class="item-ri">充值点数：{{item.dianshu}}</view>
					</view>
				</view>
				<view class="time">{{item.addtime}}</view>
			</view>
			<xw-empty :isShow="empty" text="暂无数据" textColor="#777777"></xw-empty>
			<uni-load-more :status="status" v-if="!empty" :content-text="loadText"></uni-load-more>
		</view>
		<view class="list2" v-if="current==1">
			<uni-card :title="item.desc" :extra="item.addtime" v-for="(item,index) in list" :key="index">
				<template v-slot:title>
					<view class="flex align between title">
						<view>{{item.desc}}</view>
						<!-- <view>{{item.addtime}}</view> -->
					</view>
				</template>
				<view class="flex align">
					<view class="name">消费金额</view>
					<view class="item">{{item.price}}</view>
				</view>
				<view class="flex align">
					<view class="name">扣费时间</view>
					<view class="item">{{item.addtime}}</view>
				</view>
			</uni-card>
		</view>
		<u-calendar :show="showCalendar" mode="range" @close="showCalendar=false" @confirm="onConfirmDate"
			:minDate="minDate" :maxDate="maxDate" :monthNum="20"></u-calendar>
	</view>
</template>

<script>
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	import {
		storePayIndex,
		storePriceindex
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				current: 0,
				dianshu: '',
				tabs: ['充值记录', '消费明细'],
				searchValue: '',
				show: false,
				totalPage: 1,
				page: 0,
				offset: 20,
				list: [],
				scrollTop: 0,
				empty: false,
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				status: 'loadmore',
				type: '3',
				showCalendar: false,
				minDate: '2024-01-01',
				maxDate: `${year}-${month}-${date + 2}`,
				addTime: '',
				addTimeS: '',
				addTimeText: ''
			}
		},
		onShow() {
			console.log(decodeURIComponent(
				'%7B%22addtime%22%3A%222024-07-04+00%3A00%3A00+-+2024-07-05+23%3A59%3A59%22%7D'))
			console.log(decodeURIComponent(
				'%7B%22addtime%22%3A%222024-07-04%2B00%3A00%3A00%2B-%2B2024-07-05%2B23%3A59%3A59%22%7D'))
			console.log(decodeURIComponent('%7B%22addtime%22%3A%22RANGE%22%7D'))
			console.log(decodeURIComponent('%7B%22addtime%22%3A%22RANGE%22%7D'))
			this.page = 0
			this.list = []
			this.getlist()
		},
		onPageScroll(e) {
			const that = this;
			that.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			const that = this;
			that.getlist();
		},
		methods: {
			onConfirmDate(e) {
				console.log(e)
				this.showCalendar = false
				this.addTimeS = e[0] + " 00:00:00 - " + e[e.length - 1] + "+23:59:59"
				this.addTimeText = e[0] + '-' + e[e.length - 1]
				console.log(this.addTimeS)
				this.page = 0
				this.list = []
				this.getlist()
			},
			async getlist() {
				const that = this;
				console.log(that.addTimeS)
				const {
					totalPage,
					page,
					offset,
					list,
					group_id,
					type,
					dianshu,
					current,
					addTimeS
				} = that;
				let filter = ''
				if (current == 0) {
					if (type == 3) {
						filter = JSON.stringify({
							'dianshu': dianshu
						})

						if (dianshu == '') {
							filter = {}
						}
					} else {
						filter = JSON.stringify({
							"type": type.toString(),
							'dianshu': dianshu
						})

						if (dianshu == '') {
							filter = JSON.stringify({
								"type": type.toString(),
							})
						} else {
							filter = JSON.stringify({
								"type": type.toString(),
								'dianshu': dianshu
							})
						}
					}


				}
				if (current == 1 && dianshu != '') {
					filter = JSON.stringify({
						"desc": dianshu
					})
				}
				console.log(filter)
				console.log(that.addTimeS)
				let obj = {
					menu_url: 'store_pay',
					limit: offset,
					offset: page,
					filter: filter
				};
				if (current == 0 && addTimeS != '') {
					obj.op = JSON.stringify({
						addtime: "RANGE"
					})
				}
				that.status = 'loading';
				if (that.current == 0) {
					if (totalPage > page) {
						let result = await storePayIndex(obj);
						that.page = page + 1;
						if (result.total == 0) {
							that.empty = true;
							that.status = 'nomore';
							return;
						}
						that.empty = false;
						setTimeout(() => {
							that.status = 'loadmore';
						}, 500);
						that.list = list.concat(result.rows);
						that.totalPage = Math.ceil(result.total / offset);
					} else {
						setTimeout(() => {
							that.status = 'nomore';
						}, 500);
					}
				} else {
					console.log(555)
					obj.menu_url = 'store_price'
					obj.op = JSON.stringify({
						"desc": "LIKE"
					})
					if (totalPage > page) {
						let result = await storePriceindex(obj);
						that.page = page + 1;
						if (result.total == 0) {
							that.empty = true;
							that.status = 'nomore';
							return;
						}
						that.empty = false;
						setTimeout(() => {
							that.status = 'loadmore';
						}, 500);
						that.list = list.concat(result.rows);
						that.totalPage = Math.ceil(result.total / offset);
					} else {
						setTimeout(() => {
							that.status = 'nomore';
						}, 500);
					}
				}

			},
			toShow() {
				this.show = !this.show
			},
			changeTab(index) {
				console.log('当前选中的项：' + index)
				this.current = index
				this.dianshu = ''
				this.page = 0
				this.list = []
				this.getlist()
			},
			toType(e) {
				this.type = e
				this.page = 0
				this.list = []
				this.getlist()
			},
			input(e) {
				console.log(e)
				this.page = 0
				this.list = []
				this.getlist()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-sel {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
	}

	.tabs {
		background: white;
		padding: 15rpx 0;
		margin: 0 30rpx;

		.tab-item {
			flex: 1;
			text-align: center;
			justify-content: center;
			position: relative;

			image {
				width: 22rpx;
				height: 12rpx;
				margin-left: 26rpx;
			}

			.tab-option {
				position: absolute;
				width: 100%;
				top: 60rpx;
				background: white;
				box-shadow: 1rpx 1rpx 1rpx 2rpx gainsboro;

				view {
					padding: 16rpx 0;
					border-bottom: solid 1rpx #D9D9D9;
				}
			}
		}
	}

	.lists {
		margin: 300rpx 30rpx 0;

		.item {
			background: white;
			padding: 27rpx 25rpx;
		}

		.time {
			color: #C0C0C0;
			font-size: 24rpx;
		}

		.item-left {
			image {
				width: 84rpx;
				height: 84rpx;
				margin-right: 17rpx;
			}

			.tit {
				color: #333333;
				font-size: 28rpx;
				font-weight: bold;
				margin-bottom: 5rpx;
			}


		}

		.item-ri {
			color: #1E9C00;
			font-weight: bold;
			font-size: 28rpx;
		}
	}

	.list2 {
		margin-top: 200rpx;

		.title {
			padding: 20rpx 24rpx;
			border-bottom: solid 1rpx #D9D9D9;
			color: #333333;

			view:nth-child(1) {
				font-size: 32rpx;
				font-weight: bold;
			}

			view:nth-child(2) {
				font-size: 32rpx;
			}
		}

		.name {
			font-size: 26rpx;
			color: #2D2D2D;
			width: 30%;
		}

		.item {
			font-size: 26rpx;
			color: #B2B2B2;
		}
	}
</style>